import { CarFilled, ContactsFilled, PhoneFilled } from '@ant-design/icons';
import { Card, Col, Row, Space } from 'antd';
import React from 'react';
import styles from './track.css';

const LogisticTrack: React.FC = () => {
  return (
    <>
      <div className={styles.title}>物流追踪</div>
      <Row gutter={24}>
        <Col span={6}>
          <Card
            className={styles.card}
            style={{
              width: 260,
              height: 215,
            }}
          >
            <Row gutter={24}>
              <Col span={16}>
                <p>RRS2023093300001</p>
              </Col>
              <Col className={styles.first} span={8}>
                <p>·已完成</p>
              </Col>
            </Row>
            <p>武汉基地</p>
            <p>
              {/*<Image src='./car.jpeg' width={20} height={20}></Image>*/}
              <Space>
                <CarFilled />
              </Space>
              皖AB0710
            </p>
            <p>
              <Space>
                <ContactsFilled />
              </Space>
              马超
            </p>
            <p>
              <Space>
                <PhoneFilled />
              </Space>
              152****6747
            </p>
          </Card>
        </Col>
        <Col span={18}>
          <p className={styles.p1}>收发地:武汉基地—————————{'>'}福州中心</p>
          <Row
            gutter={24}
            style={{
              display: 'flex',
              marginTop: 30,
            }}
          >
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>创建订单</p>
                <p>2023.9.21</p>
                <p>9:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>派车</p>
                <p>2023.9.21</p>
                <p>12:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>装货确认</p>
                <p>2023.9.21</p>
                <p>17:20</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>开始运输</p>
                <p>2023.9.21</p>
                <p>18:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>交货确认</p>
                <p>2023.9.22</p>
                <p>13:20</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p3}></div>
              <div className={styles.cardItemText}>
                <p>签收</p>
                <p>2023.9.22</p>
                <p>14:00</p>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row
        gutter={24}
        style={{
          marginTop: 50,
        }}
      >
        <Col span={6}>
          <Card
            className={styles.card}
            style={{
              width: 260,
              height: 215,
            }}
          >
            <Row gutter={24}>
              <Col span={16}>
                <p>RRS2023093300002</p>
              </Col>
              <Col
                span={8}
                style={{
                  color: 'blue',
                }}
              >
                <p>·运输中</p>
              </Col>
            </Row>
            <p>武汉基地</p>
            <p>
              {/*<Image src='./car.jpeg' width={20} height={20}></Image>*/}
              <Space>
                <CarFilled />
              </Space>
              皖AC2156
            </p>
            <p>
              <Space>
                <ContactsFilled />
              </Space>
              沈庆东
            </p>
            <p>
              <Space>
                <PhoneFilled />
              </Space>
              159****6652
            </p>
          </Card>
        </Col>
        <Col span={18}>
          <p className={styles.p1}>收发地:武汉基地—————————{'>'}厦门中心</p>
          <Row
            gutter={24}
            style={{
              display: 'flex',
              marginTop: 30,
            }}
          >
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>创建订单</p>
                <p>2023.9.21</p>
                <p>10:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>派车</p>
                <p>2023.9.21</p>
                <p>12:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>装货确认</p>
                <p>2023.9.21</p>
                <p>18:20</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p3x}></div>
              <div className={styles.cardItemText}>
                <p>开始运输</p>
                <p>2023.9.21</p>
                <p>18:50</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>交货确认</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p5}></div>
              <p className={styles.cardItemText}>签收</p>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row
        gutter={24}
        style={{
          marginTop: 50,
        }}
      >
        <Col span={6}>
          <Card
            className={styles.card}
            style={{
              width: 260,
              height: 215,
            }}
          >
            <Row gutter={24}>
              <Col span={16}>
                <p>RRS2023093300003</p>
              </Col>
              <Col
                span={8}
                style={{
                  color: 'yellow',
                }}
              >
                <p>·待运输</p>
              </Col>
            </Row>
            <p>武汉基地</p>
            <p>
              {/*<Image src='./car.jpeg' width={20} height={20}></Image>*/}
              <Space>
                <CarFilled />
              </Space>
              皖KN9313
            </p>
            <p>
              <Space>
                <ContactsFilled />
              </Space>
              陈德明
            </p>
            <p>
              <Space>
                <PhoneFilled />
              </Space>
              133****6788
            </p>
          </Card>
        </Col>
        <Col span={18}>
          <p className={styles.p1}>收发地:武汉基地—————————{'>'}阿克苏中心</p>
          <Row
            gutter={24}
            style={{
              display: 'flex',
              marginTop: 30,
            }}
          >
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>创建订单</p>
                <p>2023.9.21</p>
                <p>9:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p3x}></div>
              <div className={styles.cardItemText}>
                <p>派车</p>
                <p>2023.9.21</p>
                <p>12:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>装货确认</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>开始运输</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>交货确认</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p5}></div>
              <div className={styles.cardItemText}>
                <p>签收</p>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
      <Row
        gutter={24}
        style={{
          marginTop: 50,
        }}
      >
        <Col span={6}>
          <Card
            className={styles.card}
            style={{
              width: 260,
              height: 215,
            }}
          >
            <Row gutter={24}>
              <Col span={16}>
                <p>RRS2023093300003</p>
              </Col>
              <Col
                span={8}
                style={{
                  color: 'red',
                }}
              >
                <p>·已取消</p>
              </Col>
            </Row>
            <p>武汉基地</p>
            <p>
              {/*<Image src='./car.jpeg' width={20} height={20}></Image>*/}
              <Space>
                <CarFilled />
              </Space>
              皖AE6018
            </p>
            <p>
              <Space>
                <ContactsFilled />
              </Space>
              薛彪
            </p>
            <p>
              <Space>
                <PhoneFilled />
              </Space>
              159****3714
            </p>
          </Card>
        </Col>
        <Col span={18}>
          <p className={styles.p1}>收发地:武汉基地—————————{'>'}龙岩中心</p>
          <Row
            gutter={24}
            style={{
              display: 'flex',
              marginTop: 30,
            }}
          >
            <Col span={4} className={styles.cardItem}>
              <div className={styles.dotN}></div>
              <div className={styles.cardItemText}>
                <p>创建订单</p>
                <p>2023.9.21</p>
                <p>9:00</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p6}></div>
              <div className={styles.cardItemText}>
                <p>派车</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>装货确认</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <div className={styles.cardItemText}>
                <p>开始运输</p>
              </div>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p4x}></div>
              <p className={styles.cardItemText}>交货确认</p>
            </Col>
            <Col span={4} className={styles.cardItem}>
              <div className={styles.p5}></div>
              <p className={styles.cardItemText}>签收</p>
            </Col>
          </Row>
        </Col>
      </Row>
    </>
  );
};
export default LogisticTrack;
